import {
  StyleSheet,
  Text,
  TextInput,
  View,
  Dimensions,
  TouchableHighlight,
  ScrollView,
  FlatList,
  Image,
} from "react-native";
import React, { useEffect, useState } from "react";
import Ionicons from "@expo/vector-icons/Ionicons";
import axios from "axios";
import { router } from "expo-router";
import Api from '../Api/api'
export default function activity() {
  const [state, setState] = useState(false); //控制搜索框的显示
  const [text, onChangeText] = useState(""); //搜索框的值
  const [actity, setactity] = useState([]); //获取活动列表
  let getacitiy = async () => {
    let {
      data: { data },
    } = await Api.get("/yg/activity");
    let data1 = data.sort((a: any, b: any) => {
      if (
        a.activitystatus === "活动报名中" &&
        b.activitystatus !== "活动报名中"
      )
        return -1;
      if (
        a.activitystatus !== "活动报名中" &&
        b.activitystatus === "活动报名中"
      )
        return 1;
      return 0; // 如果两个活动的状态相同，则保持原顺序
    });
    setactity(data1);
  };
  useEffect(() => {
    getacitiy();
  }, []);
  const acitiycolor = (statusa) => {
    if (statusa === "活动报名中") {
      return { color: "#0000FF" };
    } else if (statusa === "活动已截止") {
      return { color: "#ccc" };
    }
  };
  return (
    <View style={styles.container}>
      {state ? (
        <>
          <View style={styles.searchbox}>
            <View style={styles.searchinput}>
              <Ionicons name="search-outline" size={18} color={"#ccc"} />
              <TextInput
                style={styles.input}
                onChangeText={onChangeText}
                value={text}
                placeholder="搜索"
              />
            </View>
          </View>
        </>
      ) : (
        <>
          <View style={styles.searchbox}>
            <TouchableHighlight
              onPress={() => {
                setState(true);
              }}
            >
              <View style={styles.search}>
                <Ionicons name="search-outline" size={24} color={"#ccc"} />
                <Text style={{ marginLeft: 10, color: "#ccc" }}>搜索</Text>
              </View>
            </TouchableHighlight>
          </View>
        </>
      )}
      <View style={styles.activity}>
        <FlatList
          data={actity}
          renderItem={({ item }) => (
            <TouchableHighlight
              onPress={() => {
                router.push({
                  pathname: "/YgFile/DescActivity",
                  params: {
                    title: item.activitytitle,
                    statusa: item.activitystatus
                  }
                })
              }}
            >
              <View style={styles.activityItem} key={item._id}>
                <Image
                  style={styles.activityimg}
                  source={{ uri: item.activityimg }}
                />
                <View style={styles.activityText}>
                  <Text style={{ paddingRight: 10 }}>{item.activitytitle}</Text>
                  <Text style={{ marginTop: 15 }}>
                    {item.activitystatus === "活动报名中"
                      ? "活动时间：2024.11.1-2024.12.30"
                      : "活动时间：2024.10.1-2024.11.1"}
                  </Text>
                  <Text
                    style={[styles.statusText, acitiycolor(item.activitystatus)]}
                  >
                    {item.activitystatus}
                  </Text>
                </View>
              </View>
            </TouchableHighlight>
          )}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  searchbox: {
    width: Dimensions.get("window").width,
    height: 70,
    alignItems: "center",
    justifyContent: "center",
  },
  search: {
    width: Dimensions.get("window").width - 100,
    height: 40,
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#FFF",
    borderRadius: 20,
  },
  searchinput: {
    width: Dimensions.get("window").width - 100,
    height: 40,
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#FFF",
    borderRadius: 20,
  },
  input: {
    height: 40,
    width: "90%",
  },
  activity: {
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height - 70,
    borderTopColor: "#ccc",
    borderTopWidth: 1,
  },
  activityItem: {
    width: Dimensions.get("window").width,
    height: 100,
    backgroundColor: "#FFF",
    flexDirection: "row",
    display: "flex",
    marginTop: 10,
    paddingLeft: 10,
  },
  activityimg: {
    width: 100,
    height: 100,
  },
  activityText: {
    width: Dimensions.get("window").width - 100,
    height: 100,
    paddingLeft: 10,
  },
  statusText: {
    fontSize: 14,
    marginTop: 10,
  },
});
